<template>
  <!-- 卡片组件 -->
  <v-card class="card rounded-sm">
    <v-card-text>
      <!-- 标题 -->
      <div class="title">
        <div class="left">
          <v-icon> {{icon}} </v-icon>
          <span> {{title}} </span>
        </div>
        <div class="right">
          <div class="i" @click="detailsList"></div>
        </div>
      </div>
      <!-- 下划线 -->
      <v-divider></v-divider>
      <!-- 内容，给父组件展示数据的 -->
      <slot></slot>
    </v-card-text>
  </v-card>
</template>

<script>
export default {
  props: [
    'icon',
    'title',
    'details'
  ],
  data () {
    return {

    }
  },
  methods: {
    detailsList() {
      // 跳转到详情页
      this.$router.push(`/list/${this.details}`)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~/assets/style/global.scss';

.card {
  margin-top: .3rem;
  padding: .4rem;
  box-shadow: none !important;
  .v-card__text {
    font-size: $max-fs;
    .title {
      height: .5rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: .25rem;
      .i{
        display: inline-block;
        background: url(~/assets/img/icon.png) no-repeat ;
        background-size: 375px 455px;
      }
      .left {
        display: flex;
        align-items: center;
        .v-icon {
          margin-right: .1rem;
        }
      }
      .right {
        position: relative;
        .i {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          background-position: 47.619% 56.305%;
          width: 30px;
          height: 3px;
        }
      }
    }
  }
  .v-icon {
    width: 23px;
  }
}
</style>